
@import '@/styles/common/variables.scss';
#register .el-form{
  width: 464px;
  margin: 0 auto;
  padding-top: 56px;
  .el-select{
    width: 100%;
  }
  .el-select__tags{
    padding-left: 10px;
  }
  .title{
    color: #363434;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
  }
  .secTitle{
    color: #666666;
    font-size: 14px;
    margin-bottom: 32px;
  }
  .tip{
    color: #666666;
    font-size: 12px;
    margin-bottom: 40px;
    margin-top: 8px;
    line-height: 1.8;
    letter-spacing: 0.6px;
  }
  .formTitle{
    color: #666666;
    font-size: 14px;
    margin-top: 16px;
    margin-bottom: 4px;
  }
  .el-button.el-button--default{
    width: 100%;
    background-color: #CCCCCC;
    color: #FFFFFF;
    font-size: 14px;
    border-color: #CCCCCC;
    margin-top: 16px;
    &:focus,
    &:hover{
      border-color: #CCCCCC;
    }
    &.isFull{
      border: none;
      background-color: #363434;
      &:hover{
        background-color: #666666;
      }
    }
  }
  .el-form-item{
    margin-bottom: 24px;
  }

}

.dialog_warranty{
  right: 15px;
  .el-dialog{
     width: 464px;
     top: 50%;
   }
   .el-dialog__body{
     padding: 0 24px 32px;
     p{
       color: #666666;
       font-size: 14px;
     }
   }
   .el-dialog__header{
     height: 32px;
     .el-dialog__headerbtn{
       top: 10px;
       right: 10px;
        .el-dialog__close{
          color: #cccccc;
          &:hover{
            color: #363434;
          }
        }
     }
   }
 }
 .dialog_email{
 
   .el-dialog{
     margin-top: -116px !important;
   }
   .el-dialog__body{
     span{
       cursor: pointer;
       color: #0B95FD;
     }
   }
 
   
 }
 
 .dialog_signin{
   .el-dialog{
     margin-top: -116px !important;
   }
   .el-dialog__footer{
     height: 80px;
     text-align: center;
     line-height: 80px;
     padding: 0;
     .el-button{
       height: 32px;
       width: 104px;
       text-align: center;
       background-color: #363434;
       &:hover{
        background-color: #666666;
       }
       a{
         text-decoration: none;
         color: #FFFFFF;
       }
     }
   }
   .el-dialog__body{
     height: 120px;
   }
 }

.warranty_dialog{
  &.el-dialog__wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-dialog__header{
    padding: 0;
    .el-dialog__headerbtn{
      top: 16px;
      right: 16px;
    }
  }
  .el-dialog{
    margin-top: 0 !important;
    width: 464px;
    left: -8px;
  }
  .el-dialog__footer{
    text-align: center;
    .el-button{
      height: 32px;
      padding: 0 24px;
      &.btnWidth{
        // width: 174px;
        padding: 0 24px;
      }
    }
  }
}


#app #register {
  @include respond('768'){
    .el-form{
      width: 100%;
      padding: 24px 20px 0;
      .title{white-space: nowrap; font-size: 20px;}
    }
    .warranty{
      .title{
        font-size: 20px;
        margin-bottom: 12px;
      }
      .secTitleGuide > span{
        margin-left: 0px;
        display: block;
      } 
    }
    .warranty_dialog .el-dialog{
      width: 100%;
      margin: 0 20px;
      left: 0;
    }
    .betaTester{
      .secTitleGuide{
        text-align: left;
        > span{
          margin-left: 0px;
          display: block;
        } 
      }    
    }
  }
}